<template>
  <div class="widget-container">
    <div class="widget-content-container">
      <div class="widget-topbar">
        <div class="widget-title">
          <div class="title">{{ data.title }}</div>
          <div class="range">{{ data.timespan }}</div>
        </div>
      </div>
      <div class="widget-chart-container">
        <el-row>
          <el-col v-show="data.number" :xs="24" :sm="24" :md="dataSize=='large'?4:24" :lg="dataSize=='large'?4:24" :xl="dataSize=='large'?4:24">
            <div :class="['customer-side', 'size-'+dataSize]">
              <el-row>
                <el-col :xs="24" :sm="24" :md="dataSize=='normal'?18:24" :lg="dataSize=='normal'?18:24" :xl="dataSize=='normal'?18:24">
                  <div class="main-number-content">
                    <!-- <div class="time">{{ data.curtime }}</div> -->
                    <div class="number-content">
                      <span class="number">{{ data.number }}</span>
                      <span class="measuresUnit">{{ data.measuresUnit }}</span>
                      <div class="mom-yoy-content">
                        <div class="MOM-content">
                          <span class="measuresUnit">环比</span>
                          <span :class="data.monthOnMonth < 0 ? 'kpi-drop': 'kpi-rise'">
                            <span :class="data.monthOnMonth < 0 ? 'icon-falling': 'icon-rising'">
                              <span>{{ Math.abs(data.monthOnMonth * 100).toFixed(2) + '%' }}</span>
                            </span>
                          </span>
                        </div>
                        <div class="MOM-content">
                          <span class="measuresUnit">同比</span>
                          <span :class="data.yearOnYear < 0 ? 'kpi-drop': 'kpi-rise'">
                            <span :class="data.yearOnYear < 0 ? 'icon-falling': 'icon-rising'">
                              <span>{{ Math.abs(data.yearOnYear * 100).toFixed(2) + '%' }}</span>
                            </span>
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </el-col>
                <el-col v-if="data.total" :xs="24" :sm="24" :md="dataSize=='normal'?6:24" :lg="dataSize=='normal'?6:24" :xl="dataSize=='normal'?6:24">
                  <div class="second-number-content">
                    <div>
                      <span>合计</span>
                      <span class="number">{{ data.total }}</span>
                      <span class="measuresUnit">{{ data.measuresUnit }}</span>
                    </div>
                    <div>
                      <span>均值</span>
                      <span class="number">{{ data.average }}</span>
                      <span class="measuresUnit">{{ data.measuresUnit }}</span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col v-if="dataChartType!='number'" :xs="24" :sm="24" :md="dataSize=='large'?20:24" :lg="dataSize=='large'?20:24" :xl="dataSize=='large'?20:24">
            <div class="customer-main">
              <line-chart :chart-data="data.chart" :data-size="dataSize" :series="series"/>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import LineChart from '@/components/Charts/lineChart'
import { lineSeries, lineMultiSeries, lineMultiSeries2 } from '@/views/demo/cibn/series.js'
export default {
  components: {
    LineChart
  },
  props: {
    dataChartType: {
      type: String,
      default: 'line'
    },
    dataSize: {
      type: String,
      default: 'normal'
    },
    data: {
      type: Object,
      default: () => {}
    },
    paneType: {
      type: String,
      default: 'pane-1'
    },
    legend: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      series: []
    }
  },
  mounted() {
    if (this.paneType === 'pane-line') {
      this.series = lineSeries(this.legend)
    }
    if (this.paneType === 'pane-line-multi') {
      this.series = lineMultiSeries()
    }
    if (this.paneType === 'pane-line-multi2') {
      this.series = lineMultiSeries2()
    }
  }
}
</script>

<style lang="scss" scoped>
.widget-container{
  margin: 0 20px 20px 0;
  .widget-content-container{
    background: #FFF;
    box-shadow: 0 2px 11px 0 rgba(190,202,218,.17);
    border: 2px #FFF solid;
    border-radius: 3px;
    padding: 15px 20px;
    height: 100%;
    &:hover{
      border: 2px solid #409EFF;
    }
    .widget-topbar{
      cursor: move;
      width: 100%;
      // margin-bottom:20px;
      .widget-title{
        .title{
          font-size: 14px;
          color: #5F6E82;
          margin-bottom:5px;
        }
        .range{
          font-size: 12px;
          color: #8492A6;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .widget-chart-container{
    color: #8492A6;
    font-size: 13px;
    overflow: hidden;
    .customer-side{
      .main-number-content{
        .number-content{
          margin-top:10px;
          overflow: hidden;
          .number{
            font-size: 40px;
            color: #475669;
            max-width: calc(100% - 30px);
            display: inline-block;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .measuresUnit{
            font-size: 12px;
            margin-top: 30px;
          }
          .mom-yoy-content{
            margin-top:10px;
            .MOM-content{
              font-size: 12px;
              margin-bottom: 5px;
              .kpi-drop{
                color: #FC6772;
                position: relative;
                padding-left: 12px;
                .icon-falling{
                  &:before{
                    content: '';
                    width: 0;
                    border-width: 5px;
                    border-style: solid;
                    border-color: #FC6772 transparent transparent transparent;
                    position: absolute;
                    top: 4px;
                    left: 0px;
                  }
                }
              }
              .kpi-rise{
                color: #2DCA93;
                position: relative;
                padding-left: 12px;
                .icon-rising{
                  &:before{
                    content: '';
                    width: 0;
                    border-width: 5px;
                    border-style: solid;
                    border-color: transparent transparent #2DCA93 transparent;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                  }
                }
              }
            }
          }
        }
      }
      .second-number-content{
        float: left;
        border-top: 1px solid #E9F0F7;
        padding: 28px 0 0;
        margin-top: 15px;
        div{
          span{
            font-size: 12px;
          }
          .number{
            color: #475669;
            font-size: 18px;
          }
        }
      }
      &.size-normal{
        .main-number-content{
          .mom-yoy-content{
            display: inline-block;
            margin-left:10px
          }
        }
        .second-number-content{
          border-top: 0 none;
          padding: 0 0 0 28px;
          border-left: 1px solid #E9F0F7;
        }
      }
      &.size-mini{
        .main-number-content{
          .mom-yoy-content{
            .MOM-content{
              display: inline-block;
              margin-right: 10px;
            }
          }
        }
      }
    }
    .customer-main{
      margin-top: 20px;
    }
  }
}
</style>
